<template>
  <div class="box">
    <!-- 顶部文字 -->
    <div class="app-container">
      <span>楼栋管理</span>
      <p>用于展示小区列表信息，以及增加,修改,删除等操作</p>
    </div>
    <!-- 头部输入框 -->
    <el-card class="box-but">
      <el-form class="demo-form-inline" :inline="true" label-position="top">
        <el-form-item label="小区名称">
          <el-select v-model="data.community_code" placeholder="请选择">
            <el-option v-for="item in getSelectHome" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="栋数名称">
          <el-input v-model="data.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="data.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          />
        </el-form-item>
        <el-form-item class="but">
          <el-button type="primary" size="small" @click="queryData">查询</el-button>
          <el-button size="small" @click="replacement">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据主体 -->
    <el-card class="box-card">
      <el-button type="primary" class="but-flet" size="small" @click="OpenDrawe">新增小区</el-button>
      <el-table style="width: 100%" :data="list">
        <el-table-column prop="code" label="栋数编号" width="350" />
        <el-table-column prop="community.name" label="小区名称" width="150" />
        <el-table-column prop="name" label="栋数名称" />
        <el-table-column prop="lift" label="电梯数" />
        <el-table-column prop="create_time" label="创建时间">
          <!-- 格式化时间 -->
          <template #default="{ row }">
            {{ entryTime(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="OpenDrawe(row.id)">编辑</el-button>
            <el-button type="text" @click.native="buildingDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-sizes="[2, 5, 10, 20]"
        :page-size="data.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 底部文字 -->
    <div class="bottomtxt">
      <p>Ant Design Pro黑马前端合肥前端欢迎您</p>
      <p>© 2023 悦兴物业集团</p>
    </div>
    <buildingDrawer ref="buildingDrawer" :housre-dialog.sync="housreDialog" />
  </div>
</template>

<script>
import buildingDrawer from './community/buildingDrawer.vue'
import { BuildingInformationAPI, buildingDelAPI, getSelectHomeApi } from '@/api/LouDong'
import dayjs from 'dayjs'
export default {
  name: 'One',
  components: {
    buildingDrawer
  },
  data() {
    return {
      // 获取数据携带的参数(分页)
      data: {
        current: 1,
        pageSize: 10,
        id: '',
        community_code: '',
        // 栋数编号
        code: '',
        // 小区名字
        community: {
          name: ''
        },
        // 栋数名称
        name: '',
        // 电梯数
        lift: '',
        // 日期绑定的时间
        create_time: null,
        // 描述
        house: ''
      },
      // 抽屉开关
      housreDialog: false,
      // 获取到的每栋数据
      list: [],
      // 所有小区的信息
      getSelectHome: [],
      // 总数据个数
      total: 0
    }
  },
  created() {
    this.BuildingInformation()
    this.getSelectHomes()
  },
  methods: {
    // 格式创建时间  需要 npm i dayjs  下载插件
    entryTime(value) {
      // 使用插件格式化事件格式
      return value ? dayjs(value).format('YYYY-MM-DD') : ''
    },
    // 获取页面数据
    async BuildingInformation() {
      const { data } = await BuildingInformationAPI(this.data)

      // console.log(data)
      this.list = data.rows
      this.total = data.count
      // console.log(this.list)
    },
    // 获取所有小区名称
    async getSelectHomes() {
      const res = await getSelectHomeApi(this.datas)
      this.getSelectHome = res.data
      // console.log(this.getSelectHome)
    },
    // 分页页数
    handleSizeChange(val) {
      this.data.pageSize = val
      this.BuildingInformation()
    },
    // 分页页码
    handleCurrentChange(val) {
      this.data.current = val
      this.BuildingInformation()
    },
    // 删除楼栋信息
    async buildingDel(id) {
      this.$confirm('确认删除？', '温馨提示').then(async() => {
        await buildingDelAPI(id)
        this.$message.success('删除成功')
        this.BuildingInformation()
        // console.log(res)
      })
    },
    // 查询
    async queryData() {
      if (this.data.create_time) {
        this.data.create_time = this.data.create_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await BuildingInformationAPI(this.data)
      this.list = res.rows
      this.total = res.count
    },
    // 重置
    replacement() {
      this.data = {
        current: 1,
        pageSize: 10,
        id: '',
        community_code: '',
        // 栋数编号
        code: '',
        // 小区名字
        community: {
          name: ''
        },
        // 栋数名称
        name: '',
        // 电梯数
        lift: '',
        // 日期绑定的时间
        create_time: null,
        // 描述
        house: ''
      }
      this.BuildingInformation()
    },
    // 打开抽屉
    OpenDrawe(id) {
      this.housreDialog = true
      this.$refs.buildingDrawer.communityParticulars(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 40px 40px;
  .app-container{
    padding: 0;
    span{
      font-weight:800;
      font-size: 18px;
      margin-right: 10px;
    }
    p{
      display:inline-block;
    }
  }
  .box-but{
    margin-bottom: 20px;
    span{
      font-weight: 800;
    }
    .but{
      margin-top: 48px;
    }
    .el-date-editor{
      display: block;
      padding: 0 0 0 10px;
    }
     .el-form-item {
      margin-right: 15px;
      // margin-left: 40px;
      width: 200px;
    ::v-deep .el-input__inner{
     height: 35px;
      line-height: 35px;
      width: 200px;
    }
    ::v-deep .el-date-editor--daterange{
      width: 335px;
    }
  }
    .el-form-item:nth-child(3){
      width: 335px;
    }
  }
  .box-card{
     margin-bottom: 20px;
    .but-flet{
      float: right;
    }
  }
  .bottomtxt{
    text-align: center;
    p{
      margin: 0;
    }
  }

}
  .el-pagination{
    margin: 20px 0;
  }

</style>
